<template>
  <div class="box">
    <div class="top">
      <span>用户列表</span
      ><span> <el-button @click="add" type="primary">添加用户</el-button></span>
    </div>
    <el-table :data="list" style="width: 100%; height: 400px">
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" />
      <el-table-column label="性别" align="center">
        <template #default="scope">
         
            <el-tag v-show="scope.row.gender === '1'" type="danger">男</el-tag>
            <el-tag v-show="scope.row.gender === '2'" type="success">女</el-tag>
            <el-tag v-show="scope.row.gender === '3'" type="">保密</el-tag>
       
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">

        
            <el-tag type="danger">禁用</el-tag>
         
  
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      @current-change="getlist"
      :hide-on-single-page="flang"
      v-model:current-page="count"
    />
    <!-- 添加 -->
    <el-drawer v-model="drawer">
      <h2 v-if="changeOrAdd === 1">添加用户</h2>
      <h2 v-if="changeOrAdd === 2">编辑用户</h2>
      <el-form ref="form">
        <el-form-item label="用户名">
          <el-input v-model="form1.username"> </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form1.password" type="password" show-password>
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form1.email" type="text"> </el-input>
        </el-form-item>
        <el-radio-group v-model="form1.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          <el-radio :label="3">保密</el-radio>
        </el-radio-group>
        <el-form-item label="手机号">
          <el-input v-model="form1.mobile" type="text"> </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="close">取消</el-button>
          <el-button v-if="changeOrAdd === 1" type="primary" @click="addok"
            >添加</el-button
          >
          <el-button v-if="changeOrAdd === 2" type="primary" @click="changeOk"
            >完成编辑</el-button
          >
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { getuserlist, adduserlist, chanuserlist } from "../../service/user";
import { ElMessage, ElMessageBox } from "element-plus";
//添加修改表单
let form1 = reactive({
  username: "",
  password: "",
  email: "",
  gender: 1,
  mobile: "",
});
let id = ref(0);
let drawer = ref(false);
let changeOrAdd = ref(1);
let list = ref([]);
//请求参数
let count = ref(1);
//分页器
let page = ref(1);
//后端分页
let total = ref(0);
let flang = ref(false);

onMounted(() => {
  getlist();
});
//获取列表
function getlist() {
  getuserlist(count.value).then((res) => {
    if(res.data.message==="success"){
      console.log(res);
    list.value = res.data.paginate.data;
    total.value=res.data.paginate.last_page*10;
  }
    
  });
}
//确认添加
function addok() {
  if (
    form1.username === "" ||
    form1.password === "" ||
    form1.email === "" ||
    form1.gender === null ||
    form1.mobile === ""
  ) {
    ElMessage({
      message: "信息填写不完全",
      type: "error",
    });
    return;
  }
  console.log(form1);
  adduserlist(form1).then((res) => {
    console.log(res);
    // this.drawer = false;
    console.log(res.data.message);
    if (res.data.message === "success") {
      ElMessage({
        message: "添加成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: "添加失败,请检查格式",
        type: "error",
      });
    }
    drawer.value = false;
    form1.username = "";
    form1.password = "";
    form1.email = "";
    form1.gender = 1;
    form1.mobile = "";
    getlist();
  });
}
//确认修改
function changeOk() {
  chanuserlist({
    id: id.value,
    username: form1.username,
    password: form1.password,
    email: form1.email,
    gender: form1.gender,
    mobile: form1.mobile,
  }).then((res) => {
    console.log(res);
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    drawer.value = false;
    form1.username = "";
    form1.password = "";
    form1.email = "";
    form1.gender = 1;
    form1.mobile = "";
    getlist();
  });
}
//点击取消
function close() {
  drawer.value = false;
}

//点击删除
function handleDelete(index, row) {
  console.log(index, row);
}
//点击修改
function handleEdit(index, row) {
  console.log(index, row);

  id.value = row.id;
  form1.username = row.username;
  form1.password = row.password;
  form1.email = row.email;
  form1.gender = row.gender;
  form1.mobile = row.mobile;

  drawer.value = true;
  changeOrAdd.value = 2;
}
//点击添加
function add() {
  drawer.value = true;
  changeOrAdd.value = 1;
}
</script>

<style lang="scss" scoped>
.box {
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .top {
    border: 1px solid #ccc;
    margin: 5px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
